<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { TreeChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import eData from "./eData.js";

echarts.use([TreeChart, CanvasRenderer]);

const chartContainer = ref(null);

const echartsInit = (data) => {
  const myChart = echarts.init(chartContainer.value);
  const option = {
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
    },
    series: [
      {
        type: "tree",
        data: [data],
        left: "2%",
        right: "2%",
        top: "8%",
        bottom: "20%",
        label: {
          position: "inside",
          color: "rgba(245, 240, 180, 1)",
          fontStyle: "italic",
          fontWeight: "bold",
          fontFamily: "Courier New",
          fontSize: 16,
          align: "center",
          verticalAlign: "middle",
        },
        layout: "orthogonal",
        orient: "TB",
        symbol: "circle",
        symbolSize: 50,
        symbolRotate: 0,
        symbolKeepAspect: true,
        edgeShape: "curve",
        edgeForkPosition: "51%",
        roam: false,
        expandAndCollapse: false,
        initialTreeDepth: 1,
        itemStyle: {
          color: "rgba(77, 78, 76, 1)",
          borderColor: null,
          borderWidth: 1,
          borderType: "dashed",
          borderDashOffset: 4,
          borderCap: "square",
          borderJoin: "miter",
          borderMiterLimit: 150,
          shadowBlur: 8,
          shadowColor: "rgba(0, 0, 0, 0.46)",
          shadowOffsetX: 2,
          shadowOffsetY: 3,
          opacity: 0.88,
        },
        lineStyle: {
          color: "rgba(146, 146, 146, 1)",
          width: 1,
        },
        // 子标签样式
        /* leaves: {
          label: {
            position: "inside",
          },
        }, */
        animationDurationUpdate: 750,
      },
    ],
  };
  //   绑定resize事件
  window.addEventListener("resize", function () {
    // 调整图表大小
    myChart?.resize();
  });

  option && myChart.setOption(option);
};

onMounted(() => {
  echartsInit(eData);
});
</script>

<template>
  <div class="app">
    <div ref="chartContainer" id="tree"></div>
  </div>
</template>

<style scoped lang="scss">
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  #tree {
    width: 90vw;
    height: 360px;
  }
}
</style>
